<template>
	<div id="zj">
		<div class="zjBox cf" v-for="zj in hotAlbums">
			<span class="zjImg cf"><img :src="zj.picUrl"/></span>
			<span class="zjName">{{zj.name}}</span>
			<span class="zjTime">{{format(zj.publishTime)}}</span>
			<span class="zjSize">{{zj.size}}首</span>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	
	export default{
		beforeMount(){
			
			var id = this.$store.state.geshouId;
			axios.get('https://netease.bluej.cn/artist/album?timestamp=11&limit=30&id='+id).then((res)=>{
				console.log(res.data.hotAlbums);
				this.hotAlbums = res.data.hotAlbums
				
			})
		},
		data(){
			return{
				hotAlbums:[],
			}
		},
		methods:{
			format(time){
				//格式化时间
				var d = new Date(time);
				var year = d.getFullYear();
				var month = d.getMonth()+1;
				var dat = d.getDate();
				return year+"-"+month+"-"+dat;
		},
		}
		
	}
</script>

<style lang="scss">
	#zj{
		padding-top: 38px;
		padding-bottom: 60px;
		.zjBox{
			text-align:left;
			.zjImg{
				margin: 10px;
				float: left;
				display: inline-block;
				width: 50px;
				height:50px;
				border-radius:8px;
				overflow:hidden;
			img{
				width: 100%;
			}
			}
			.zjName{
				color: white;
				font-size: 16px;
				padding-top: 10px;
   				display: block;
			}
			.zjTime{
				display: inline-block;
				color: #bababb;
				font-size: 12px;
				padding-top: 10px;
			}
			.zjSize{
				display: inline-block;
				text-indent: 10px;
				color: #bababb;
				font-size: 12px;
			}
		}
		
	}
</style>